<template>
	<view>
		<view class="top">
			<image src="../../static/image/history.png"></image>
		</view>
		<view class="content">
			<view class="row" v-for="(item,index) in listArr">
				<!-- item直接传给passage组件，item里面包含looktime -->
				<passage :item="item"></passage>
			</view>
		</view>
		<view class="no" v-if="!listArr.length">
			<image src="../../static/image/nohis1.png" mode="widthFix"></image>
			<view class="text">暂无浏览历史</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listArr: []
			};
		},
		onShow() {
			this.getData();
			console.log('history的listArr:', this.listArr)
		},
		methods: {
			getData() { //从缓存获取数据
				let historyArr = uni.getStorageSync("historyArr") || []
				this.listArr = historyArr
			}
		}
	}
</script>

<style lang="scss">
	.top {
		// margin: 10rpx 0;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		background: #f7f8fa;
		position: fixed;
		top: var(--window-top);
		z-index: 5;

		image {
			width: 100rpx;
			height: 100rpx;

		}
	}

	.content {
		margin: 10rpx 10rpx;
		padding: 130rpx 10rpx 10rpx 10rpx;
		// box-shadow: 0 0 10rpx 10rpx rgba(229, 229, 229, 0.3);
		border-radius: 0rpx 0rpx 30rpx 30rpx;

		.row {
			background-color: #ffffff;
			margin: 10rpx 0;
			// border-bottom: 1px dashed #efefef;

			padding: 10rpx 10rpx;
			border-radius: 10rpx;

			&:first-child {
				border-radius: 30rpx 30rpx 0rpx 0rpx;
			}

			&:last-child {

				border-radius: 0rpx 0rpx 30rpx 30rpx;
			}
		}



	}

	.no {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 450rpx;
		}

		.text {
			font-size: 26rpx;
			color: #888;
		}
	}
</style>
